@extends('admin.layout')
@section('title', $title)
@section('content')
<!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                用户管理
                <small>在这里可以查看修改用户
                        @if(session('info'))
                            <span id="info" class="text-red">{{session('info')}}</span>
                        @endif</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url('/admin/index') }}"><i class="fa fa-dashboard"></i> 主页</a></li>
                <li><a href="{{ url('/admin/user/index') }}">用户管理</a></li>
                <li class="active">用户列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">快速查看用户列表</h3>
                        </div><!-- /.box-header -->
                        <div class="box-body">
                        
                            <table id="example1" class="table table-bordered table-striped">
                                <form action="{{ url('/admin/user/index') }}">
                                        <div class="row">
                                            <div class="col-md-2">
                                                 <div class="form-group">
                                           
                                            <select name="num" class="form-control">
                                                <option
                                                @if(!empty($request['num']) && $request['num']==2)
                                                    selected="selected"
                                                @endif
                                                >2</option>
                                                <option
                                                @if(!empty($request['num']) && $request['num']==20)
                                                    selected="selected"
                                                @endif
                                                >20</option>
                                                <option
                                                @if(!empty($request['num']) && $request['num']==50)
                                                    selected="selected"
                                                @endif>50</option>
                                                <option
                                                @if(!empty($request['num']) && $request['num']==100)
                                                    selected="selected"
                                                @endif>100</option>
                                            </select>
                                        </div>
                                            </div>
                                            <div class="col-md-4 col-md-offset-6">
                                                <div class="input-group input-group">
                                            <input name="keywords" type="text" class="form-control" value="{{$request['keywords'] or ''}}">
                                            <span class="input-group-btn">
                                          <button class="btn btn-info btn-flat" type="submit">搜索</button>
                                            </span>
                                                </div><!-- /input-group -->
                                            </div>
                                        </div>

                                   </form>
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>头像</th>
                                    <th>手机号</th>
                                    <th>邮箱</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($data as $row)
                                <tr>
                                    <td>{{ $row -> id }}</td>
                                    <td class="td_name">{{ $row -> name }}</td>
                                    <td><img style="height:30px;width:30px;" src="{{ $row -> pic }}"></td>
                                    <td>{{ $row -> phone }}</td>
                                    <td>{{ $row -> email }}</td>
                                    <td class="td_status">@if($row -> status == 0)禁用@else启用@endif</td>
                                    <td><a href="{{ url('/admin/user/edit') }}/{{ $row -> id }}">编辑</a> <a href="{{ url('/admin/user/delete') }}/{{ $row -> id }}"> 删除</a></td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                            {{ $data -> appends($request)-> links() }}
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
    <script type="text/javascript">

        window.onload = function()
        {
            var isDbl = true;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(".td_name").on('dblclick', function(){
                if(!isDbl) return;
                isDbl = false;
                var td = $(this);
                // 获取id
                var id = $(this).prev().html();
                // 获取原来的值
                var old_value = $(this).html();
                // 创建input元素
                var inp = $('<input type="text">');
                // 将原来的写入input
                inp.val(old_value);
                // 将td改为input
                $(this).html(inp);
                // 直接全部选中
                inp.select();

                // 失去焦点事件
                inp.on('blur', function() {
                    // 获取新值
                    var new_value = $(this).val();
                    $.ajax({
                        url: "{{ url('/admin/user/changename') }}",
                        type: 'GET',
                        dataType: 'TEXT',
                        data: {id:id, name:new_value},
                        success:function(data)
                        {
                            if(data)
                            {
                                td.html(new_value);
                            }else
                            {
                                td.html(old_value);
                            }
                        },
                        error:function()
                        {

                        }
                    });
                    isDbl = true;
                });

            }); 

            // 禁用
            $(".td_status").on('dblclick', function(){
                var tdStatus = $(this);
                var status = $(this).html();
                var id = $(this).prev().prev().prev().prev().prev().html();
                $.ajax({
                    url: "{{ url('/admin/user/changestatus') }}",
                    type: 'GET',
                    dataType: 'TEXT',
                    data: {id: id, status: status},
                    success:function(data)
                    {
                        if(data==1)
                        {
                            tdStatus.html('禁用');
                        }else
                        {
                            tdStatus.html('启用');
                        }

                    },
                    error:function()
                    {
                    }
                });
            });




            $("#info").fadeOut(5000); 
        }

    </script>
@endsection